import { updateQueue } from './component';

/**
 * 事件绑定
 * 
 * @param {HTMLElement} dom 事件绑定的 DOM 元素
 * @param {Event} eventType 事件类型
 * @param {Function} handler 事件执行函数
 */
export function addEvent(dom, eventType, handler) {

    const store = dom.store ? dom.store : (dom.store = {});

    store[eventType] = handler; // 为每个 DOM 绑定事件，处理函数是委托给 document 了

    // react 从 17 版本开始把事件委托给跟容器 div#root，之前版本是委托在 document 上的
    if (!document[eventType]) {
        document[eventType] = dispathcEvent;
    }
}

/**
 * 合成事件的统一代理函数
 * 
 * @param {*} event 
 */
function dispathcEvent(event) {
    const { type, target } = event;

    const eventType = `on${type}`;

    // 异步就把事件设置为批量更新 true
    updateQueue.isBatchingUpdate = true;

    const { store } = target;
    const handler = store && store[eventType];
    handler && handler(event);// 执行对应的事件函数(用户自己绑定的事件函数)

    updateQueue.isBatchingUpdate = false;
    updateQueue.batchUpdate(); // 批量更新
}